<template>
    <div class="icons">
        <swiper :options="swiperOption">
        <swiper-slide v-for="(page, index) of pages" :key="index"> 
        <div class="icon" 
            v-for="(item, index) of page" 
            :key="index">
            <img class="icon-img" :src="item.imgUrl" alt="">
            <p class="text-content">{{item.desc}}</p>
        </div>
        </swiper-slide> 
        <div class="swiper-pagination"  slot="pagination"></div>
        <div class="swiper-scrollbar"   slot="scrollbar"></div>
        </swiper>
        
    </div>
</template>
<script>
export default {
    props:{
        iconList:Array
    },
    name: 'Icons',
    data () {
        return{
             swiperOption:{
                autoplay: false,
                pagination: '.swiper-pagination',
                // loop:true
            },
          
        }
    },
    computed: {
        pages () {
            const pages = []
            this.iconList.forEach((item, index) => {
                const page = Math.floor(index / 8)
                if(!pages[page]){
                    pages[page] = []
                }
                pages[page].push(item)
            })
            console.log(pages)
            return pages
        }
    }
}
</script>
<style lang="stylus" scoped>
    @import '~styles/varibles.styl'
    .icons
        // display: flex
        // flex-wrap: wrap
        overflow: hidden
        width: 100% 
        height:0 
        padding-bottom: 50%
        // background: $bgColor
        .icon
            width:25%
            height:0
            padding-bottom: 25%
            text-align: center
            float: left
            .icon-img
                width: 1rem
                height: 1rem
                margin-top: .2rem
            .iconfont
                font-size: .7rem
            // background: #f10180
            .text-content
                margin-top: .1rem
                ellipsis()

.swiper-container-horizontal > .swiper-scrollbar
    bottom:-10px
</style>